<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            background: #191D29;
        }

    </style>
    <title>实时位置</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="css/style.css?v=5">
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=8cdee54edeab1a899e1c424ee6bafd03&plugin=AMap.PolyEditor,AMap.DistrictSearch"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>

<body>
    <header class="kjhnmdeedf pd row">
        <div class="col fanhuider">
            <img src="img/left.png" class="cz jhherertyt">
            <span class="ml5 cf fz16 titlexer">实时位置</span>
        </div>
        <div class="cf fz14 inits wanchhdeetr yuijhbbseert">
            其他车辆
        </div>
    </header>
    <div id="container"></div>
    <div class="pd jjnxeert">
        <!--        实时位置-->
        <div class="sihinhgbse act">
            <div class="jkjnmknjdr row">
                <img src="img/dfdfda.png" class="dfdfdaeeet cz">
                <div class="col pl20 fz14 z3 fgrfyzw">闪灯鸣笛</div>
            </div>
            <div class="jjhbnjhhser">
                <p class="fz16 z3">
                    鲁A·99999

                    <span class="ml40">方向：南</span>
                </p>
                <p class="mt10 z3 fz14">
                    经纬度：北纬36°40′,东经117°00′
                </p>
                <p class="mt10 z3 fz14">
                    距离我：200m
                </p>
            </div>
            <div class="jjhbnjhhser row ab cen">
                <div class="col">
                    <p class="kjnmnert">
                        <img src="img/dfdfdb.png" class="cz dfgdtyyser">
                    </p>
                    <p class="fz12">
                        导航到车辆
                    </p>
                </div>
                <div class="col gongbdfg">
                    <p class="kjnmnert">
                        <img src="img/dfdfdc.png" class="cz dfgdtyyser">
                    </p>
                    <p class="fz12 ">
                        共享位置
                    </p>
                </div>
            </div>
        </div>
        <!--        end-->
        <!--        汽车1群-->
        <div class="jjjkjbeer cf">
            <div class="jjnbnhbbhxer act">
                <p class="pd dfgdyyser">
                    <span class="cdrttysewrr"></span>
                </p>
                <div class="cen">
                    <img src="img/usericon.png" class="yj jjnnjxert">
                    <p class="cf fz16 mt10">鲁A·99999</p>
                </div>
                <div class="row cen mt30">
                    <div class="col gengzongsr">
                        <p class="">
                            <img src="img/fgdfa.png" class="kjnmnmxert">
                        </p>
                        <p class="z9 fz12">
                            跟踪
                        </p>
                    </div>
                    <div class="col">
                        <p class="">
                            <img src="img/fgdfb.png" class="kjnmnmxert">
                        </p>
                        <p class="z9 fz12">
                            导航
                        </p>
                    </div>
                </div>

            </div>
            <div class="jjnbnhbbhxer">
                <p class="pd dfgdyyser">
                    <span class="cdrttysewrr"></span>
                </p>
                <div class="cen">
                    <img src="img/usericon.png" class="yj jjnnjxert">
                    <p class="cf fz16 mt10">鲁A·99999</p>
                </div>
                <div class="row cen mt30">
                    <div class="col gengzongsr">
                        <p class="">
                            <img src="img/fgdfa.png" class="kjnmnmxert">
                        </p>
                        <p class="z9 fz12">
                            跟踪
                        </p>
                    </div>
                    <div class="col">
                        <p class="">
                            <img src="img/fgdfb.png" class="kjnmnmxert">
                        </p>
                        <p class="z9 fz12">
                            导航
                        </p>
                    </div>
                </div>

            </div>


            <div class="jjnbnhbbhxer">
                <p class="pd dfgdyyser">
                    <span class="cdrttysewrr"></span>
                </p>
                <div class="cen">
                    <img src="img/usericon.png" class="yj jjnnjxert">
                    <p class="cf fz16 mt10">鲁A·99999</p>
                </div>
                <div class="row cen mt30">
                    <div class="col gengzongsr">
                        <p class="">
                            <img src="img/fgdfa.png" class="kjnmnmxert">
                        </p>
                        <p class="z9 fz12">
                            跟踪
                        </p>
                    </div>
                    <div class="col">
                        <p class="">
                            <img src="img/fgdfb.png" class="kjnmnmxert">
                        </p>
                        <p class="z9 fz12">
                            导航
                        </p>
                    </div>
                </div>

            </div>




        </div>
        <!--        end-->

    </div>
    <!--    左侧菜单-->
    <div class="jjhbnnjhbnbde">
        <div class="kjnnjhbher pd gd ">
            <input type="text" placeholder="如：驾驶员姓名" class="knnmjhhbber">
            <div class="tr mt20">
                <button class="kkmnmd">确定</button>
            </div>
            <p class="mt40 z3 fz16">
                车库车辆
            </p>
            <div class="cheliangxzrow">
                <p class="kjnmerrtt act">
                    鲁A·GYE22
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>
                <p class="kjnmerrtt">
                    鲁A·GYE22
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>
                <p class="kjnmerrtt">
                    鲁A·GYE22
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>
                <p class="kjnmerrtt">
                    鲁A·GYE22
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>

                <p class="qc"></p>
            </div>
            <p class="mt40 z3 fz16">
                群组车辆
            </p>
            <div class="cheliangxzrow ab">
                <p class="kjnmerrtt act">
                    汽车1群
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>
                <p class="kjnmerrtt">
                    汽车2群
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>
                <p class="kjnmerrtt">
                    汽车11111群
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>
                <p class="kjnmerrtt">
                    汽车222222群
                    <img src="img/gouxuan.png" class="jjnmkjertxe">
                </p>

                <p class="qc"></p>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script type="text/javascript">
        var polygons = [],
            citycode;
        var citySelect = document.getElementById('city');
        var districtSelect = document.getElementById('district');
        var map = new AMap.Map("container", {
            center: [113.925771, 22.511998],
            mapStyle: "amap://styles/darkblue",
            zoom: 15,
            draggable: false
        });
        var viaMarker = new AMap.Marker({
            position: new AMap.LngLat(113.92371, 22.510532),
            // 将一张图片的地址设置为 icon
            size: new AMap.Size(9, 10),
            icon: './img/xce.png'
        });
        map.add([viaMarker]);
        $(function() {
            //            dingwei()
            $("body").show()
            $(".bianji").addClass("act")
            // 定位按钮触发
            $(".dfrtytre").on("click", function() {
                dingwei()
            })

            $(".kjnmerrtt").on("click", function() {
                $(this).parent().find('.kjnmerrtt').removeClass("act")
                $(this).addClass("act")
                //                群组车辆点击触发
                if ($(this).parent().hasClass("ab")) {
                    $(".sihinhgbse").removeClass("act")
                    $(".jjjkjbeer").addClass("act")
                    $(".kjnnjhbher").removeClass("act")
                    $(".titlexer").text($(this).text())
                    $(".yuijhbbseert").hide()
                    setTimeout(function() {
                        $(".jjhbnnjhbnbde").removeClass("act")
                    }, 500);
                }
            })
            //            跟踪按钮触发
            $(".gengzongsr").on("click", function() {
                $(".sihinhgbse").addClass("act")
                $(".jjjkjbeer").removeClass("act")
                $(".kjnnjhbher").addClass("act")
                $(".titlexer").text('实时位置')
                $(".yuijhbbseert").show()
            })
            // 其他车辆点击事件
            $(".yuijhbbseert").on("click", function() {
                $(".jjhbnnjhbnbde").addClass("act")
                setTimeout(function() {
                    $(".kjnnjhbher").addClass("act")
                }, 10);
            })
            // 左侧菜单 确定按钮触发
            $(".kkmnmd").on("click", function() {
                $(".kjnnjhbher").removeClass("act")
                setTimeout(function() {
                    $(".jjhbnnjhbnbde").removeClass("act")
                }, 500);
            })
            $(".jjnbnhbbhxer").on("click", function() {
                $(".jjnbnhbbhxer").removeClass("act")
                $(this).addClass("act")
            })
            // 左上角的返回按钮触发
            $(".fanhuider").on("click", function() {
                uni.navigateBack({
                    delta: 1
                });
            })
            $(".gongbdfg").on("click", function() {
                uni.navigateTo({
                    url: '/pages/index/SharedLocation'
                })
            })

        })





        function dingwei() {
            $(".dingweert").removeClass("act")
            $(".dingweert.ab").addClass("act")
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, //是否使用高精度定位，默认:true
                    zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition(function(status, result) {
                    $(".dingweert").removeClass("act")
                    $(".dingweert.aa").addClass("act")
                });
            });
        }

    </script>
</body>

</html>
